<template>
  <div class="maintenanceregist pd30 propertyMaintenance">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>添加维保单位</div>
        <!-- <i class="el-icon-close" @click="handleCloseDialogUpdate"></i> -->
      </div>

      <div class="con">
        <div class="floor-title">
          <h5>公司基本信息</h5>
        </div>
        <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable1 flex flexac">
              <span class="name texttr"><span class="mustval">*</span>机构名称：</span>
              <el-input v-model="maintenance.name" class="input" date-type="b" placeholder="请输入机构名称" />
            </div>
            <div class="inputLable inputLable2 flex flexac m-l-60">
              <span class="name texttr">机构简称：</span>
              <el-input v-model="maintenance.nameSimple" class="input" placeholder="请输入机构简称" />
            </div>
          </div>
        </div>

        <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable1 flex flexac ">
              <span class="name texttr">坐标：</span>
              <el-input class="input coordinateRead" :value="getcoordinate" readonly placeholder="请选择坐标" />
              <el-button class="locationBtn" @click="choiceCoordinate=true">定位</el-button>
            </div>
            <div class="inputLable inputLable2 flex flexac m-l-60">
              <span class="name texttr">办公地址：</span>
              <el-input v-model="maintenance.officeAddress" class="input" maintenance placeholder="请输入使用单位电话" />
            </div>
          </div>
        </div>
        <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable1 flex flexac  ">
              <span class="name texttr">注册地址：</span>
              <el-input v-model="maintenance.registerAddress" class="input" placeholder="请输入使用单位地址" />
            </div>
            <div class="inputLable inputLable2 flex flexac m-l-60">
              <span class="name texttr">邮政编码：</span>
              <el-input v-model="maintenance.zipCode" class="input" placeholder="请输入邮政编码" />
            </div>

          </div>
        </div>
        <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable1 flex flexac ">
              <span class="name texttr">维保机构电话：</span>
              <el-input v-model="maintenance.maintenancePhone" class="input" placeholder="请输入安全管理员" />
            </div>
            <div class="inputLable inputLable2 flex flexac m-l-60">
              <span class="name texttr"><span class="mustval">*</span>应急救援负责人：</span>
              <el-input v-model="maintenance.rescuePerson" class="input" maintenance placeholder="请输入应急救援负责人" />
            </div>

          </div>
        </div>
        <!-- <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>维保负责人一：</span>
              <el-input class="input" maintenance v-model="maintenance.maintenancePerson1Name" placeholder="请输入应急救援负责人"></el-input>
            </div>
            <div class="inputLable inputLable1 flex flexac m-l-60">
              <span class="name texttr"><span class="mustval">*</span>维保负责人一电话：</span>
              <el-input class="input" v-model="maintenance.maintenancePerson1Phone" placeholder="请输入法人"></el-input>
            </div>
          </div>
        </div> -->
        <!-- <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>维保负责人二：</span>
              <el-input class="input" maintenance v-model="maintenance.maintenancePerson2Name" placeholder="请输入应急救援负责人"></el-input>
            </div>
            <div class="inputLable inputLable1 flex flexac m-l-60">
              <span class="name texttr"><span class="mustval">*</span>维保负责人二电话：</span>
              <el-input class="input" v-model="maintenance.maintenancePerson2Phone" placeholder="请输入法人"></el-input>
            </div>
          </div>
        </div> -->
        <!-- <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>维保区域经理：</span>
              <el-input class="input"  v-model="maintenance.maintenanceRegionManager" placeholder="请输入应急救援负责人"></el-input>
            </div>
            <div class="inputLable inputLable1 flex flexac m-l-60">
              <span class="name texttr"><span class="mustval">*</span>维保区域经理电话：</span>
              <el-input class="input"  v-model="maintenance.maintenanceRegionManagerPhone" placeholder="请输入法人"></el-input>
            </div>
          </div>
        </div> -->
        <!-- <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>维保单位经理：</span>
              <el-input class="input"  v-model="maintenance.maintenanceUnitManager" placeholder="请输入应急救援负责人"></el-input>
            </div>
            <div class="inputLable inputLable1 flex flexac m-l-60">
              <span class="name texttr"><span class="mustval">*</span>维保单位经理电话：</span>
              <el-input class="input" v-model="maintenance.maintenanceUnitManagerPhone" placeholder="请输入法人"></el-input>
            </div>
          </div>
        </div> -->
        <!-- <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr">资质证书代码：</span>
              <el-input class="input"  v-model="maintenance.licenseCode" placeholder="请输入应急救援负责人"></el-input>
            </div>
            <div class="inputLable inputLable1 flex flexac m-l-60">
              <span class="name texttr">电梯安装许可证代码：</span>
              <el-input class="input" v-model="maintenance.installLicenseCode" placeholder="请输入法人"></el-input>
            </div>
          </div>
        </div> -->
        <div class="con-row flex flexac pl ">
          <div class="marginAuto flex flexac">
            <div class="inputLable inputLable1 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>应急救援负责人电话：</span>
              <el-input v-model="maintenance.rescuePhone" class="input" placeholder="请输入法人" />
            </div>
            <div class="inputLable inputLable2 flex flexac m-l-60">
              <span class="name texttr">法人：</span>
              <el-input v-model="maintenance.legalPerson" class="input" maintenance placeholder="请输入法人电话" />
            </div>

          </div>
        </div>

        <div class="con-row flex flexac pl ">
          <div class="inputLable inputLable1 flex flexac ">
            <span class="name texttr">法人电话：</span>
            <el-input v-model="maintenance.legalPersonPhone" class="input" placeholder="请输入法人身份证" />
          </div>
          <div class="inputLable inputLable1 flex flexac m-l-60">
            <span class="name texttr">法人身份证：</span>
            <el-input v-model="maintenance.legalPersonIdCard" class="input" placeholder="请输入法人身份证" />
          </div>

        </div>
        <div class="con-row flex flexac pl ">
          <div class="inputLable wd100 inputLable1 flex ">
            <span class="name texttr">描述：</span>
            <textarea v-model="maintenance.remark" class="markinfo" />
          </div>
        </div>
        <div class="floor-title floor-title2">
          <h5 class="flex flexjcsb flexac ">
            <span>维保人员</span>
            <div class="rowOperation">
              <el-button class="defaultbtn" @click="handleAddrow">增行</el-button>
              <el-button class="defaultbtn" @click="handleDelerow">删行</el-button>
            </div>
          </h5>
        </div>
        <div class="con-row flex flexac pl">
          <el-table :data="maintenanceList" border style="width: 100%">
            <!-- <el-table-column fixed   label="ID">
              <template slot-scope="scope">
                    <el-input v-show="true" v-model="scope.id" placeholder="请输入会员账号" />
              </template>
            </el-table-column> -->
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <el-input v-show="true" v-model="scope.name" placeholder="请输入姓名" />
              </template>
            </el-table-column>
            <!-- <el-table-column   label="维保公司ID">
                <template slot-scope="scope">
                    <el-input v-show="true" v-model="scope.companyId" placeholder="请输入维保公司ID" />
              </template>
            </el-table-column> -->
            <el-table-column label="身份证号">
              <template slot-scope="scope">
                <el-input v-show="true" v-model="scope.idCard" placeholder="请输入身份证号" />
              </template>
            </el-table-column>
            <el-table-column label="联系电话">
              <template slot-scope="scope">
                <el-input v-show="true" v-model="scope.phone" data-type="m" placeholder="请输入联系电话" />
              </template>
            </el-table-column>
            <el-table-column label="特种设备作业人员证编号" width="180">
              <template slot-scope="scope">
                <el-input v-show="true" v-model="scope.specialId" placeholder="请输入特种设备作业人员证编号" />
              </template>
            </el-table-column>
            <el-table-column label="档案编号">
              <template slot-scope="scope">
                <el-input v-show="true" v-model="scope.archivesId" placeholder="请输入档案编号" />
              </template>
            </el-table-column>
            <el-table-column label="发证时间">
              <template slot-scope="scope">
                <el-input v-show="true" v-model="scope.issuedTime" placeholder="请输入发证时间" />
              </template>
            </el-table-column>
            <!-- <el-table-column  label="类型">
                  <template slot-scope="scope">
                    <el-input v-show="true" v-model="scope.type" placeholder="请输入类型" />
              </template>
            </el-table-column> -->
            <el-table-column prop="zip" label="证书照片">
              <template slot-scope="scope">
                <el-button class="defaultbtn" type="primary" plain size="mini" @click="handleEdit(scope.$index, scope.row)">
                  <i class="iconfont icon-shangchuan" />
                  上传图片</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="照片预览">
              <template slot-scope="scope">
                <el-button class="defaultbtn" type="primary" plain size="mini" @click="handleEdit1(scope.$index, scope.row)">
                  图片地址</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="floor-title">
          <h5>公司证照</h5>
        </div>
        <div class="con-row flex flexac pl ">
          <div class="inputLable inputLable2 flex ">
            <span class="name texttr p-t-10">三证合一证书：</span>
            <uploadImg imgtype="threeImg" :send-imginfo="handleImginfo" />
          </div>
          <div class="inputLable inputLable2 flex flexac m-l-60">
            <span class="name texttr">三证合一代码：</span>
            <el-input v-model="maintenance.businessLicenseCode" class="input" maintenance placeholder="请输入应急救援负责人" />
          </div>
        </div>
        <div class="con-row flex flexac pl ">
          <div class="inputLable inputLable2 flex ">
            <span class="name texttr p-t-10">资质证书：</span>
            <uploadImg imgtype="qualifications" :send-imginfo="handleImginfo" />
          </div>
          <div class="inputLable inputLable2 flex flexac m-l-60">
            <span class="name texttr">资质证书代码：</span>
            <el-input v-model="maintenance.licenseCode" class="input" placeholder="请输入应急救援负责人" />
          </div>
        </div>
        <div class="con-row flex flexac pl ">
          <div class="inputLable inputLable2 flex ">
            <span class="name texttr p-t-10">电梯安装许可证：</span>
            <uploadImg imgtype="lift" :send-imginfo="handleImginfo" />
          </div>
          <div class="inputLable inputLable1 flex flexac m-l-60">
            <span class="name texttr">电梯安装许可证代码：</span>
            <el-input v-model="maintenance.installLicenseCode" class="input" placeholder="请输入法人" />
          </div>
        </div>

      </div>

      <div class="flex  footerBtn m-t-35">
        <el-button class="defaultbtn saveBtn" @click="handleSave">保存</el-button>
        <el-button class="defaultbtn clsoeBtn" @click="handleCloseDialogUpdate">关闭</el-button>
      </div>
    </div>
    <el-dialog v-if="choiceCoordinate" custom-class="coordinateWrap" :close-on-click-modal="false" :visible.sync="choiceCoordinate">
      <coordinate />
    </el-dialog>

  </div>
</template>

<script>

import { maintenanceAdd } from '@/api/maintenance/role'
import { showNotice, successNotice, checkMobile } from '@/utils/toolclass'
import uploadImg from '@/components/uploadImg'
import city from '@/components/city'
import coordinate from '@/components/coordinate'
import bus from '@/utils/bus'

export default {
  components: {
    uploadImg, city, coordinate
  },
  props: {
    addFactory: {
      type: Object
    },
    isEdit: {
      type: Boolean
    }
  },
  data() {
    return {
      // maintenance: {
      //   id: '',
      //   name: 'das',
      //   nameSimple: 'adas',
      //   zipCode: 'qeq',
      //   registerAddress: 'eqwqwwq',
      //   officeAddress: 'ewq',
      //   maintenancePhone: '13602703461',
      //   rescuePerson: '',

      //   rescuePhone: '',
      //   maintenancePerson1Id: '',
      //   maintenancePerson1Name: '',
      //   maintenancePerson1Phone: '13602703461',

      //   maintenancePerson2Id: '',
      //   maintenancePerson2Name: '',
      //   maintenancePerson2Phone: '13602703461',
      //   maintenanceRegionManager: '',
      //   maintenanceRegionManagerPhone: '13602703461',
      //   maintenanceUnitManager: '',
      //   maintenanceUnitManagerPhone: '13602703461',
      //   licenseCode: 'das',
      //   licensePicId: 'das',
      //   installLicenseCode: 'das',
      //   installLicensePicId: 'das',
      //   businessLicenseCode: 'das',
      //   businessLicensePicId: '1',
      //   longitude: '123',
      //   legalPersonIdCard: '',
      //   legalPersonPhone: '13602703461'

      // },
      maintenance: {
        id: '',
        name: '',
        nameSimple: '',
        zipCode: '',
        registerAddress: '',
        officeAddress: '',
        maintenancePhone: '',
        rescuePerson: '',

        rescuePhone: '',
        maintenancePerson1Id: '',
        maintenancePerson1Name: '',
        maintenancePerson1Phone: '',

        maintenancePerson2Id: '',
        maintenancePerson2Name: '',
        maintenancePerson2Phone: '',
        maintenanceRegionManager: '',
        maintenanceRegionManagerPhone: '',
        maintenanceUnitManager: '',
        maintenanceUnitManagerPhone: '',
        licenseCode: '',
        licensePicId: '',
        installLicenseCode: '',
        installLicensePicId: '',
        businessLicenseCode: '',
        businessLicensePicId: '',

        longitude: '',
        latitude: '',

        legalPersonIdCard: '',
        legalPersonPhone: ''

      },
      maintenanceList: [
        {
          id: 1,
          name: '张三',
          companyId: '001',
          idCard: 430,
          phone: 139,
          specialId: 12231,
          archivesId: 212221,
          issuedTime: 2020,
          type: '技术人员'

        }
      ],
      choiceCoordinate: false

    }
  },
  computed: {
    getcoordinate: function() {
      if (this.maintenance.longitude == '' || this.maintenance.latitude == '') {
        return ''
      } else {
        return ('' + this.maintenance.longitude) + ' , ' + (this.maintenance.latitude + '')
      }
    }
  },
  created() {
    this.onCloseCoordinate()
    this.onSendCoordinate()
  },
  methods: {
    onSendCoordinate() {
      bus.$on('sendCoordinate', (data) => {
        this.maintenance.longitude = data.lng
        this.maintenance.latitude = data.lat
        this.handleCloseCoordinate()
      })
      bus.$on('sendCoordinateAddress', (data) => {
        // console.log('sendCoordinateAddress')
        // console.log(data)
        this.maintenance.officeAddress = (data.province === undefined ? '' : data.province) + '' + (data.city === undefined ? '' : data.city) + '' + (data.title === undefined ? '' : data.title)
      })
    },
    onCloseCoordinate() {
      bus.$on('closeCoordinate', (data) => {
        this.handleCloseCoordinate()
      })
    },
    handleCloseCoordinate() {
      this.choiceCoordinate = false
    },
    handleAddrow() {
      this.maintenanceList.push({
        id: '',
        name: '',
        companyId: '',
        idCard: '',
        phone: '',
        specialId: '',
        archivesId: '',
        issuedTime: '',
        type: ''
      })
    },
    handleDelerow() {
      this.maintenanceList.pop()
    },
    handleImginfo(res) {

    },
    handleUpdate() {
      simpleViewUpdate(this.addFactory).then((res) => {
        if (res.code == '000000') {
          showNotice('success', '提示', '保存成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }
      })
    },
    handleSave() {
      if (this.maintenance.name == '') {
        showNotice('error', '提示', '机构名称为空')
        return
      }
      if (this.maintenance.rescuePerson == '') {
        showNotice('error', '提示', '应急救援负责人为空')
        return
      }
      if (this.maintenance.rescuePhone == '') {
        showNotice('error', '提示', '应急救援负责人电话不能为空')
        return
      }

      if (!checkMobile(this.maintenance.rescuePhone)) {
        showNotice('error', '提示', '应急救援负责人电话手机格式不对')
        return
      }

      if (this.maintenance.maintenancePerson1Name == '') {
        showNotice('error', '提示', '维保负责人一为空')
        return
      }
      if (this.maintenance.maintenancePerson1Phone == '') {
        showNotice('error', '提示', '维保负责人一电话不能为空')
        return
      }
      if (!checkMobile(this.maintenance.maintenancePerson1Phone)) {
        showNotice('error', '提示', '维保负责人一电话手机格式不对')
        return
      }

      if (this.maintenance.maintenancePerson2Name == '') {
        showNotice('error', '提示', '维保负责人二为空')
        return
      }
      if (this.maintenance.maintenancePerson2Phone == '') {
        showNotice('error', '提示', '维保负责人二电话不能为空')
        return
      }
      if (!checkMobile(this.maintenance.maintenancePerson2Phone)) {
        showNotice('error', '提示', '维保负责人二电话手机格式不对')
        return
      }

      if (this.maintenance.maintenanceRegionManager == '') {
        showNotice('error', '提示', '维保区域经理为空')
        return
      }
      if (this.maintenance.maintenanceRegionManagerPhone == '') {
        showNotice('error', '提示', '维保区域经理电话不能为空')
        return
      }
      if (!checkMobile(this.maintenance.maintenanceRegionManagerPhone)) {
        showNotice('error', '提示', '维保区域经理电话手机格式不对')
        return
      }

      if (this.maintenance.maintenanceUnitManager == '') {
        showNotice('error', '提示', '维保单位经理为空')
        return
      }
      if (this.maintenance.maintenanceUnitManagerPhone == '') {
        showNotice('error', '提示', '维保单位经理电话不能为空')
        return
      }
      if (!checkMobile(this.maintenance.maintenanceUnitManagerPhone)) {
        showNotice('error', '提示', '维保单位经理电话手机格式不对')
        return
      }
      this.handlemaintenanceAdd(this.maintenance)
    },
    handleCloseDialog() {
      console.log('子组件关闭')
      this.$emit('handleCloseDialog')
    },
    handleCloseDialogUpdate() {
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
    },
    handlemaintenanceAdd(obj) {
      maintenanceAdd(obj).then((res) => {
        if (res.code == '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }
      })
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
@import "@/styles/addtable.scss";
.inputLable .name {
  width: 140px !important;
  letter-spacing: 0px;
}
.panelWrap .title {
  padding-left: 30px;
}
h5 {
  font-size: 15px;
  background-color: #f5f5f5;
}
</style>
